<template>
  
  <el-table
    :data="tableData"
    style="width: 100%; margin-top: 20px; margin-bottom: 20px"
    :height="tableData.length ? '700' : '500'"
  >
    <el-table-column
      prop="realName"
      label="姓名"
      align="center"
      :formatter="formatterCellval"
    >
    </el-table-column>
    <el-table-column
      prop="className"
      label="班级"
      align="center"
      :formatter="formatterCellval"
      :filters="filterClass"
      :filter-method="filterHandler"
      sortable
    >
    </el-table-column>
    <el-table-column
      prop="stuNum"
      label="学号"
      align="center"
      :formatter="formatterCellval"
      sortable
    >
    </el-table-column>
    <!-- <el-table-column prop="finishedCount" label="已学任务" align="center" sortable />
    <el-table-column prop="studyingCount" label="在学任务" align="center" sortable />
    <el-table-column prop="notStartCount" label="未学任务" align="center" sortable /> -->
    <el-table-column label="任务统计" align="center" sortable prop="finishedCount" class-name="tableTaskCount">
      <template slot="header">
        <div class="percentLine">
          <p>任务统计</p>
          <div class="stateTips">
            <el-tooltip class="item" effect="dark" content="未学" placement="top">
              <span></span>
            </el-tooltip> <span>未学</span>
            <el-tooltip class="item" effect="dark" content="在学" placement="top">
              <span style="background: #f9c957"></span>
            </el-tooltip> <span>在学</span>
            <el-tooltip class="item" effect="dark" content="已学" placement="top">
              <span style="background: #91cd74"> </span>
            </el-tooltip> <span>已学</span>
          </div>
        </div>
      </template>
      <template slot-scope="scope">
        <div class="percentLine">
          <el-tooltip class="item" effect="dark" :content="`已学任务: ${scope.row.finishedCount}`" placement="top">
            <span :style="{ 'max-width': `${getPercent(scope, 'finishedCount')}`, background: '#91cd74'}">{{scope.row.finishedCount}}</span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="`在学任务: ${scope.row.studyingCount}`" placement="top">
            <span :style="{ 'max-width': `${getPercent(scope, 'studyingCount')}`, background: '#f9c957'}">{{scope.row.studyingCount}}</span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="`未学任务: ${scope.row.notStartCount}`" placement="top">
            <span :style="{ 'max-width': `${getPercent(scope, 'notStartCount')}`, background: '#ef6765'}">{{scope.row.notStartCount}}</span>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

export default {
  data() {
    return {
      search: "",
    };
  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    courseInfo: Object,
    currNo: Number,
    courseID: Number,
  },
  computed: {
    getTableData() {
      let arr = this.tableData;
      if (this.search)
        arr = arr.filter(
          (item) =>
            item?.realName?.indexOf(this.search) !== -1 ||
            item?.stuNum?.indexOf(this.search) !== -1
        );
      const selectClassName = this.$route?.query?.filter;
      if (selectClassName && selectClassName !== "全部") {
        return arr.filter((item) => item.className == selectClassName);
      }
      return arr;
    },
    filterClass() {
      let classList = [];
      this.getTableData.forEach((item) => {
        if (
          item.className &&
          !classList.some((citem) => citem.value == item.className)
        ) {
          classList.push({ text: item.className, value: item.className });
        }
      });
      return classList;
    },
    finshCount() {
      const data = {
        notStartStuCount:
          this.getTableData.map((item) => item.notStartCount) || [],
        studyingStuCount:
          this.getTableData.map((item) => item.studyingCount) || [],
        finishedStuCount:
          this.getTableData.map((item) => item.finishedCount) || [],
      };
      return data;
    },
    stuList() {
      return this.getTableData.map((item) => item.realName || "未知");
    },
    getPercent() {
      return function(scope, name) {
        return ((scope.row[name] / (this.courseInfo.taskTotal || 0)) * 100) + '%'
      }
    }
  },
  methods: {
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    //无内容显示占位符
    formatterCellval(row, column, cellValue, index, n) {
      if (!cellValue && column.label === "姓名") {
        return (
          row.realName || row.nickName || row.email || row.regName || "未知"
        );
      }
      return cellValue || "未知";
    },
    // 跳转批阅
    jumpRoute(item) {
      this.$router.push({
        name: "Correct",
        query: {
          currNo: this.currNo,
          courseID: this.courseID,
          // Multiple: JSON.stringify([item.row.userID]),
          chooseNo: item.row.chooseNo,
        },
        params: {
          id: this.currNo,
        },
      });
    },
    // 删除选修对话框
    handleDeleteDialog(item) {
      this.deleteStudent = item;
      this.$emit("showDeleteDialog", item);
    },
    // 筛选班级
    async handleChange(val) {
      const { query, params, name } = this.$route;
      await this.$router.push({
        name: name,
        query: { ...query, filter: val },
        params: params,
      });
    },
  },
};
</script>

<style lang="stylus">
.el-table__header {
  .tableTaskCount .cell {
    display: flex !important;
    align-items: center;
    justify-content: center;

    .percentLine {
      width: auto;
      flex-flow: column;

      .stateTips {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }

      .item {
        width: 40px;
        height:25px;
        background: #ef6765;
        font-weight: 500;
      }

    }
  }
}
.tableTaskCount {
  .percentLine {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;

    span {
      flex: 1;
      min-width: 5%
    }

    // .stateTips {
    //   .item {
    //     color: #505050
    //   }
    // }
  }
}
</style>